<template>
	<div id="app">
    <div id="main-wrapper">
      <transition name="fade" appear><router-view></router-view></transition>
    </div>
  </div>
</template>
<script>
  import './dist/css/style.min.css'
  /* 
  import './assets/libs/select2/dist/css/select2.min.css'
  import './assets/libs/select2/dist/js/select2.full.min.js'
  import './assets/libs/select2/dist/js/select2.min.js'
  */
  import $ from 'jquery'

  import './dist/js/common'

  import './dist/js/config'

  import routes from './components/WrapperRoutes.js'

  window.$ = $;
  window.jQuery = $;

  $.ajaxSetup({
    xhrFields: {
      withCredentials: true
    },
    crossDomain: true
  })

  $(document).on('shown.bs.modal', '.modal', function() {
    $(this).find('input:visible:eq(0)').focus()
  })

  function created() {
    var router = this.$router
    $(document).ajaxError(function(event, xhr, settings) {
      if (xhr.status === 403) {
        setTimeout(() => $('.tipbox .alert').hide(), 300)
        router.push('/login')
      } else if (xhr.status === 401) {
        $(document).failMsg("权限不足")
      }
    })
  }

  export default {
    name: 'App',
    routes,
    created,
  }
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
/*   
.list-complete-item {
  transition: all .5s;
  display: inline-block;
}
.list-complete-enter, .list-complete-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}
 */
.alert-load > div {
    padding-left: 33px;
    background-position: 10px center;
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-image: url("./assets/images/icon-loading.gif");
}
.page-link:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn-primary.focus, .btn-primary:focus, .btn.focus, .btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-horizontal .modal .form-group {
	height:auto;
	padding-left: 50px;
	padding-right: 50px;
}
.form-horizontal .modal .form-group .control-label {
	vertical-align: top;
	line-height: 30px;
	width: 100px;
  text-align: right;
}
.form-horizontal .modal .form-group .invalid-feeback {
	color: #da542e;
	font-size: 85%;
	margin:0px
}

.form-inline.from-search .form-group {
	margin-bottom: 10px;
	margin-right:10px;
}

.bootstrap-select.show .dropdown-menu.show {
  display: block;
}
</style>